import ReactEcharts from "echarts-for-react";

function ExpenditureColumn() {
    const names = ["心内科", "烧伤科", "骨科", "耳鼻喉科", "呼吸道", "肠胃科"];
    const values = [28, 28, 28, 28, 28, 28]; // Set fixed values
    const option = {
        // backgroundColor: "#041139",
        tooltip: {
            trigger: 'item'
        },
        grid: {
            left: 60,
            top: 40,
            right: 40,
            bottom: 60
        },
        xAxis: {
            boundaryGap: true,
            axisLabel: {
                textStyle: {
                    color: '#fff'
                },
                interval: 0,
                margin: 20 // Margin between axis labels and the axis line
            },
            axisLine: {
                show: false
            },
            axisTick: {
                show: false // Hide ticks
            },
            splitLine: {
                show: false
            },
            data: names
        },
        yAxis: {
            splitLine: {
                show: false,
            },
            axisTick: {
                show: true
            },
            axisLine: {
                show: false
            },
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#fff'
                }
            },
            max: 100 // Set maximum Y value to enhance the visual effect
        },
        series: [
            // Bottom semicircles
            {
                name: "",
                type: "pictorialBar",
                symbolSize: [15, 10], // Adjust shape
                symbolOffset: [0, 5],
                itemStyle: {
                    color: '#0075ec'
                },
                z: 12,
                data: values
            },
            // Main bars
            {
                name: '',
                type: 'bar',
                barWidth: 15,
                showBackground: true,
                backgroundStyle: {
                    color: "#001758"
                },
                itemStyle: {
                    color: {
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        type: "linear",
                        global: false,
                        colorStops: [
                            {offset: 0, color: "#026ee7"},
                            {offset: 1, color: "#06cffa"}
                        ],
                    }
                },
                label: {
                    show: true, // 显示标签
                    position: 'top', // 标签位置
                    color: '#ffffff' // 标签文字颜色
                },
                data: values
            },
            // Top semicircles
            {
                name: "",
                type: "pictorialBar",
                symbolSize: [15, 10], // Adjust shape
                symbolOffset: [0, -5],
                symbolPosition: "end",
                itemStyle: {
                    color: '#01b0f2'
                },
                z: 12,
                data: values
            }
        ]
    };
    return (
        <div style={{width: '100%', height: '100%'}}>
            <ReactEcharts style={{width: '100%', height: '100%'}} option={option}/>
        </div>
    )
}

export default ExpenditureColumn;